<template>
  <div>
    <el-container :style="{'height': hei}">
      <el-header>
        <el-row>
          <el-col :span="14">
            <div class="grid-content">
              <div class="name">土壤监测与主动反馈系统</div>
            </div>
          </el-col>
          <el-col :span="10">
            <div style="display:flex;justify-content:flex-end;">
              <div class="welcome">
                <img src="../static/image/user.png" class="user">
                <span class="ft16"><b>{{user}}</b>，您好！</span>
                <el-button plain size="mini" @click="logout()">退出</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-header>

      <el-container>
        <el-aside width="250px">
          <el-menu
            router
            :default-active="activeRouter"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="equipmentMessage" >
              <template slot="title">
                <i class="el-icon-document"></i>
                <span>设备信息</span>
              </template>
            </el-menu-item>
            <el-menu-item index="equipmentBind" v-if="level=='2'">
              <i class="el-icon-refresh"></i>
              <span slot="title">设备绑定</span>
            </el-menu-item>
            <el-menu-item index="userManage" v-if="level==2">
              <i class="el-icon-setting"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="alarmLog" v-if="level==2">
              <i class="el-icon-document"></i>
              <span slot="title">报警日志</span>
            </el-menu-item>
            <el-menu-item index="dataLog" v-if="level==2">
              <i class="el-icon-document"></i>
              <span slot="title">数据日志</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main>
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {setCookie,getCookie,delCookie} from '@/tools/cookie'
import jnTablemanage from '@/components/tableComponent.vue'

export default {
  name: 'App',
  data(){
    return{
      user:'用户1',
      activeRouter:'',
      level:''
    }
  },
  methods:{
    logout(){
      delCookie('token')
      delCookie('user_name')
      delCookie('level')
      this.$router.push('/login')
    }
  },
  mounted(){
    this.activeRouter=this.$route.path.substring(8)
    this.user=getCookie('user_name')
    this.level=getCookie('level')
  },
  updated(){
    this.activeRouter=this.$route.path.substring(8)
    this.user=getCookie('user_name')
    if(getCookie('token')==''){
      this.$router.push('/login')
    }
  },
  computed:{
    hei:function(){
      var hei=document.documentElement.clientHeight+'px'
      return hei
    },
  },
  components:{
      jnTablemanage
  }
}
</script>

<style src="./assets/css/app.css">

</style>
